<template>
	<view class="phone-login">
		<text class="text-bg">LOGIN</text>
		<text class="welcome">欢迎回来</text>
		<view class="input-box">
			<view class="input-item">
				<text>手机号码</text>
				<input placeholder-class="place" v-model="tel" type="text" placeholder="请输入手机号">
			</view>
			<view class="input-item psw" v-if="loginWay">
				<text>密码</text>
				<input placeholder-class="place" v-model="password" password placeholder="请输入密码">
			</view>
			<Captcha :clickLoginBtn="clickLoginBtn" :tel="tel" @getCode="getCode" v-else></Captcha>
			<view class="login" @click="handleLogin">登录</view>
			<view class="password-login" @click="changeLoginWay">{{!loginWay?'密码登录':'验证码登录'}}</view>
		</view>
    <navigator url="/pages/register/register">注册</navigator>
	</view>
</template>

<script>
	import Captcha from '../../components/Captcha/Captcha.vue'
	import { getPhoneLogin } from '../../api/index.js'
	export default {
		data() {
			return {
				// 电话号码
				tel: '',
				password: '',
				// true代表密码登录,false代表手机验证码登录
				loginWay: true,
				// 验证码
				code: '',
				// 验证码详情数据
				codeDetail: {},
				// 是否点击登录按钮的判断值
				clickLoginBtn: false,
				successLogin: {}
			}
		},
		components: { Captcha },
		methods: {
			// 切换登录方式
			changeLoginWay() {
				this.loginWay = !this.loginWay
			},
			// 子组件 Captcha 中触发 获取验证码及该验证码是否正确的判断值,重置是否点击登录按钮的判断值
			getCode(options) {
				const { code, codeDetail, clickLoginBtn } = options
				this.code = code
				this.codeDetail = codeDetail
				this.clickLoginBtn = clickLoginBtn
			},
			// checkCode() {
			// 	if (!(this.codeDetail?.data)) {
			// 		uni.showToast({
			// 			title: this.codeDetail?.message,
			// 			 icon: 'none',
			// 			 mask: true
			// 		})
			// 		return false
			// 	}
			// 	return true
			// },
			commonFun (res) {
				if (res?.data?.code === 200) {
					// 存储用户id到vuex
					this.$store.commit('SETUSERINFO', {
						userId: res.data.profile.userId,
						token: res.data.token,
						cookies: res.data.cookie
					})
					// 存储到本地
					// 得到token 存储到本地
					uni.setStorageSync('token', res.data.token)
					// 存储用户登录后后台返回的数据
					this.successLogin = res.data
					// 存储cookie到本地
					uni.setStorageSync('cookies', res.data.cookie)
					// 存储 userId 到本地
					uni.setStorageSync('userId', res.data.profile.userId)
					uni.showToast({
						title: '登录成功!',
						icon: 'success',
						mask: true
					})
					// 跳转到首页
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}, 2000) 
				}
			},
			async handleLogin() {
				// // 后台返回的登录成功的返回数据
				// let res
				//  效证完毕, 成功登录
				// 设置时间戳,防止缓存
				let timestamp  = new Date().getTime()
				if (this.loginWay) {
					if (getApp().checkPhone(this.tel) && getApp().checkPsw(this.password)) {
						// 密码登录
						const res = await getPhoneLogin({phone: this.tel, password: this.password, timestamp})
						this.commonFun(res)
					}
				} else {
					this.clickLoginBtn = true
					setTimeout(async () => {
						if (getApp().checkPhone(this.tel) && getApp().checkCode(this.codeDetail)) {
							// 验证码登录
							const res = await getPhoneLogin({phone: this.tel, captcha: this.code, timestamp})
							if (res.data.code !== 200) {
								uni.showToast({
									title: res.data.message,
									icon: 'none',
									mask: true
								})
								setTimeout(() => {
									// 跳转到注册页面
									if(res.data.data == null) return uni.navigateTo({url: '../../../register/register'})
								}, 2000)
							}
							this.commonFun(res)
						}
					}, 1500)
				}				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.phone-login {
		width: 100%;
		height: 100%;
		padding: 0 60rpx;
		position: relative;
		.text-bg {
			color: rgb(248, 248, 248);
			font-size: 150rpx;
			font-weight: bold;
		}
		.welcome {
			position: absolute;
			left: 80rpx;
			top: 80rpx;
			color: #555;
			font-size: 60rpx;
		}
		.input-box {
			.password-login {
				color: #66d9ef;
				margin-top: 20rpx;
				font-size: 28rpx;
			}
		}
	}
</style>
